<template>
  <view class="my-container safe-area">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card" @click="navigateTo('edit-profile')">
      <view class="user-avatar">
        <u-avatar 
          :src="userInfo.avatar  || '/static/default-avatar.png'"  
          size="120"
          mode="aspectFill"
        ></u-avatar>
        <u-badge 
          v-if="userInfo.unread"  
          :count="userInfo.unread"  
          offset="[-10, -10]"
        ></u-badge>
      </view>
      <view class="user-info">
        <text class="username">{{ userInfo.nickname  || '未设置昵称' }}</text>
        <text class="user-id">ID: {{ userInfo.id  || '--' }}</text>
        <view class="tags">
          <u-tag 
            v-if="userInfo.vip"  
            text="VIP会员" 
            size="mini" 
            type="error" 
            plain 
          />
          <u-tag 
            v-if="userInfo.certified"  
            text="已认证" 
            size="mini" 
            type="success" 
            plain 
          />
        </view>
      </view>
      <u-icon name="arrow-right" color="#999" size="20"></u-icon>
    </view>
 
    <!-- 功能列表 -->
    <view class="function-list">
      <u-cell-group :border="false">
        <!-- 择偶标准 -->
        <u-cell 
          title="择偶标准" 
          icon="list-dot" 
          isLink 
          @click="navigateTo('mate-criteria')"
        >
          <template #right-icon>
            <text class="status" :class="{ active: mateCriteria }">
              {{ mateCriteria ? '已设置' : '未设置' }}
            </text>
          </template>
        </u-cell>
 
        <!-- 专属媒人 -->
        <u-cell 
          title="专属媒人" 
          icon="service" 
          isLink 
          @click="navigateTo('mediator-detail')"
        >
          <template #right-icon>
            <text class="mediator-info">
              {{ mediator.name  || '未分配' }}
              <text v-if="mediator.phone"  class="phone">{{ mediator.phone  }}</text>
            </text>
          </template>
        </u-cell>
      </u-cell-group>
 
      <!-- 费用卡片组 -->
      <view class="card-group">
        <fee-card 
          title="媒人服务费" 
          :price="userInfo.gender  === 'male' ? '¥199/月' : '女生免费'"
          :expired="serviceFee.expired"  
          :end-time="serviceFee.endTime" 
          @action="handleServiceFee"
        >
          <template #extra>
            <u-tag 
              v-if="serviceFee.expiringSoon"  
              text="即将到期" 
              type="warning" 
              size="mini"
            />
          </template>
        </fee-card>
 
        <fee-card 
          title="建档年费" 
          :price="userInfo.gender  === 'male' ? '¥499/年' : '女生免费'"
          :status="archiveFee.status" 
          :end-time="archiveFee.endTime" 
          @action="handleArchiveFee"
        >
          <template #extra>
            <u-tag 
              v-if="archiveFee.status  === 'review'" 
              text="审核中" 
              type="warning" 
              size="mini"
            />
          </template>
        </fee-card>
      </view>
 
      <!-- 底部功能 -->
      <u-cell-group :border="false">
        <u-cell 
          title="投诉与建议" 
          icon="question-circle" 
          isLink 
          @click="navigateTo('complaint')"
        ></u-cell>
        <!-- <u-cell 
          title="系统设置" 
          icon="setting" 
          isLink 
          @click="navigateTo('settings')"
        ></u-cell> -->
      </u-cell-group>
    </view>
 
    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <u-button 
        type="error" 
        plain 
        shape="circle" 
        @click="showLogoutConfirm"
      >
        退出登录 
      </u-button>
    </view>
  </view>
</template>
 
<script>
import mediatorCard from '@/components/my/mediator-card.vue'; 
import feeCard from '@/components/my/fee-card.vue'; 
import { getUserInfo, getMediatorInfo } from '@/mock/user';
 
export default {
  components: { mediatorCard, feeCard },
  data() {
    return {
      userInfo: {},
      mediator: {},
      serviceFee: {
        expired: false,
        endTime: 0,
        expiringSoon: false 
      },
      archiveFee: {
        endTime: 0,
        status: 'normal' // normal/review/expired 
      },
      mateCriteria: false 
    }
  },
  onShow() {
    this.loadData(); 
  },
  methods: {
    async loadData() {
      // this.$u.loading.show(); 
      try {
        const [user, mediator] = await Promise.all([ 
          getUserInfo(),
          getMediatorInfo()
        ]);
        
        this.userInfo  = user;
        this.mediator  = mediator;
        this.mateCriteria  = user.mateCriteriaSet  || false;
 
        // 初始化费用状态 
        if (user.gender  === 'male') {
          const now = Date.now(); 
          const serviceEndTime = now + 30 * 86400 * 1000; // 30天后 
          
          this.serviceFee  = {
            expired: now > serviceEndTime,
            endTime: serviceEndTime,
            expiringSoon: (serviceEndTime - now) < 7 * 86400 * 1000 
          };
 
          this.archiveFee  = {
            endTime: now + 365 * 86400 * 1000, // 1年后 
            status: user.isNew  ? 'review' : 'normal'
          };
        }
      } finally {
        this.$u.loading.hide(); 
      }
    },
    async handleServiceFee() {
      const action = this.serviceFee.expired  ? 'renew' : 'cancel';
      const res = await this.$u.api[`${action}ServiceFee`](); 
      
      this.$u.toast(res.message); 
      this.loadData(); 
    },
    async handleArchiveFee() {
      if (this.archiveFee.status  === 'review') return;
      
      const res = await this.$u.api.renewArchiveFee(); 
      this.$u.toast(res.message); 
      this.loadData(); 
    },
    showLogoutConfirm() {
      this.$u.modal({ 
        title: '确认退出',
        content: '退出后将无法接收新消息',
        showCancel: true,
        async success(res) {
          if (res.confirm)  {
            await this.$u.api.logout(); 
            uni.reLaunch({  url: '/pages/login/login' });
          }
        }
      });
    },
    navigateTo(path) {
      uni.navigateTo({  url: `/pages/my/${path}` });
    }
  }
}
</script>
 
<style lang="scss" scoped>
.my-container {
  padding-bottom: 120rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
 
  .user-card {
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin: 20rpx;
    background: linear-gradient(135deg, #f8f8f8, #ffffff);
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
 
    .user-avatar {
      position: relative;
      margin-right: 30rpx;
    }
 
    .user-info {
      flex: 1;
      
      .username {
        display: block;
        font-size: 34rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
 
      .user-id {
        font-size: 24rpx;
        color: #999;
      }
 
      .tags {
        margin-top: 15rpx;
        
        .u-tag {
          margin-right: 10rpx;
        }
      }
    }
  }
 
  .function-list {
    margin-top: 30rpx;
 
    .status {
      color: #999;
      
      &.active {
        color: #19be6b;
      }
    }
 
    .mediator-info {
      color: #606266;
      
      .phone {
        margin-left: 15rpx;
        color: #2979ff;
      }
    }
  }
 
  .card-group {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
  }
 
  .logout-btn {
    margin: 40rpx 30rpx 0;
  }
}
</style>